<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
  <div class="scroll">
    <scroll class="infos_box">
      <!-- <div class="infos_title">
      <p>信息中心</p>
      </div>-->
      <div class="infos_center_box">
        <div
          class="infos_center_box_info"
          v-for="(item,index) in infoSort"
          :key="item.id"
          @click="infoItem(item)"
        >
          <dir class="infos_center_box_info_img">
            <img v-lazy="sueRecommendDataInfoImg(index)" alt />
            <!-- <img  alt /> -->
            <!-- <img src="'@/pages/mobile/assets/img/Business'+''{{item}}+'.png'"  alt=""> -->
          </dir>
          <div class="infos_center_info_item">
            <div class="infos_center_info_item_title">
              <h2>{{ item.messageTypeName }}</h2>
              <em v-if="item.messageDO">{{
                item.messageDO.creationTs | dateFormat("yyyy/MM/dd hh:mm:ss")
              }}</em>
            </div>
            <div class="infos_center_info_item_info">
              <p v-if="item.messageDO">{{ item.messageDO.messageContent }}</p>
              <i v-show="item.countType">{{ item.countType }}</i>
            </div>
          </div>
        </div>
        <!-- loading 组件 -->
        <div v-show="!infoSort.length" class="loading-container">
          <joys-loading></joys-loading>
        </div>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>

<script>
import Scroll from "@/pages/mobile/components/JoysScroll/JoysScroll";
import JoysLoading from "@/pages/mobile/components/JoysLoading/JoysLoading";
export default {
  name: "info",
  components: {
    Scroll,
    JoysLoading
  }, 

  data () {
    return {
      infoSort: [],
      // infoImg: [
      //   { img: require("@/pages/mobile/assets/img/Business@3x.png"), id: 1 },
      //   { img: require("@/pages/mobile/assets/img/SystemBroadcast@3x.png"), id: 2 },
      //   { img: require("@/pages/mobile/assets/img/Security@3x.png"), id: 3 },
      //   { img: require("@/pages/mobile/assets/img/SystemSetting@3x.png"), id: 4 },
      //   { img: require("@/pages/mobile/assets/img/TaskNotice@3x.png"), id: 5 },
      // ],
    
      infoImg:[{
        url:"",
        img:"",
      }]
    };
  },
  methods: {
    // 请求类别数据
    infoSortList () {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-admin/messageType/abstract",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          // messageStatus: "UNREAD",
          // pageIndex: 1,
          // pageSize: 1000
        }
      })
        .then(res => {
          this.infoSort = res.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    
    sueRecommendDataInfoImg (id) {
      id
      return require("@/pages/mobile/assets/img/Business"+id+".png");
    },
    // sueRecommendDataInfoImg (id) {
    //   if (!id) {
    //     return require("@/pages/mobile/assets/img/defaultImg.png");
    //   } else {
    //     return (
    //       this.$baseUrl + "/joys-rest/joys-file/file/browse/one2one/" +
    //       id +
    //       "?AUTH-TOKEN=" +
    //       localStorage.getItem("AUTH-TOKEN")
    //     );
    //   }
    // },
    infoItem (item) {
      this.$router.push({
        path: `/info/${item.messageTypeId}`,
        query: {
          itemInfo: item
        }
      });
    }
  },
  mounted () {
    this.infoSortList();
  },
  activated () { }
};
</script>

<style scoped lang="less">
.scroll {
  .infos_box {
    position: fixed;
    top: 0.44rem;
    bottom: 0.58rem;
    width: 100%;
    // margin-top: 0.44rem;
    background-color: #fbf9fe;
    .infos_center_box {
      background: #ffffff;
      box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
      // padding-bottom: 0.47rem;
      .infos_center_box_info {
        overflow: hidden;
        padding-left: 0.6rem;
        .infos_center_box_info_img {
          float: left;
          width: 0.36rem;
          height: 0.36rem;
          margin: 0.12rem 0.11rem;
          margin-left: -0.5rem;
          border-radius: 0.18rem;
          img {
            width: 0.36rem;
            height: 0.36rem;
            margin: auto;
            margin-top: -0.13rem;
            // margin-left: 0.08rem;
            border-radius: 50%;
          }
        }
        .infos_center_info_item {
          width: 100%;
          // width: 2.87rem;
          height: 0.64rem;
          box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
          // background-color: red;
          float: left;
          .infos_center_info_item_title {
            overflow: hidden;

            // height: 0.24rem;
            h2 {
              float: left;
              font-family: Mediums;
              font-size: 0.15rem;
              color: #202f1f;
              letter-spacing: -0.41px;
              height: 0.24rem;
              line-height: 0.24rem;
              margin-top: 0.12rem;
            }
            em {
              float: right;
              font-family: Regular;
              font-size: 0.13rem;
              color: #adadad;
              letter-spacing: -0.36px;
              text-align: right;
              line-height: 0.13rem;
              margin-top: 0.12rem;
              margin-right: 0.18rem;
            }
          }
          .infos_center_info_item_info {
            overflow: hidden;
            height: 0.16rem;
            margin-right: 0.16rem;
            p {
              float: left;
              text-align: left;
              font-family: Regular;
              font-size: 0.13rem;
              color: #636363;
              letter-spacing: -0.36px;
              line-height: 0.16rem;
              width: 75%;
              height: 0.16rem;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            i {
              float: right;
              background: #ff2121;
              border-radius: 7px;
              height: 0.14rem;
              padding: 0 0.05rem;
              font-family: Regular;
              font-size: 0.12rem;
              color: #ffffff;
              letter-spacing: -0.29px;
              line-height: 0.14rem;
            }
          }
        }
      }
    }
  }
}
</style>